<!-- 确认费用 -->
<!-- eslint-disable vue/no-mutating-props -->
<template>
  <a-modal
    popup-container=".page-container"
    v-model:visible="showModal"
    @close="onClose"
    @before-ok="submitFn"
    title="确认费用"
    class="modal-dialog-wrapper"
    unmount-on-close
    :mask-closable="false"
    width="65vw"
  >
    <div class="fee-page">
      <div class="fee-list">
        <div v-for="(item, index) in feeList" :key="index" style="margin: 0 20px">
          <feeitem :fee="item" />
        </div>
        <div class="all-cost">
          <span>合计</span>
          <div class="cost-num">
            <div>{{ costType == 10 ? '应收' : '应付' }}：{{ feeCostAmount.receiveAmount }}元</div>
            <div style="margin-top: 16px">{{ costType == 10 ? '待收' : '待付' }}：{{ feeCostAmount.receivedNotAmount }}元</div>
          </div>
        </div>
      </div>
      <a-divider class="custom-divider" />

      <page-form :model="form" layout="vertical" ref="formRef" style="margin-top: 40px">
        <page-form-row>
          <page-form-item
            field="paymentTime"
            :label="costName + '时间'"
            :rules="[{ required: true, message: '请选择' + costName + '时间', trigger: 'change' }]"
          >
            <i-date-picker class="w-full" v-model="form.paymentTime" show-time value-format="YYYY-MM-DD HH:mm:ss" />
          </page-form-item>
          <page-form-item
            field="paymentMethod"
            :label="costName + '方式'"
            :rules="{ required: true, message: '请选择' + costName + '方式' }"
            labelTooltipContent="收/付款方式支持在系统管理菜单下的收支账号管理页面进行配置。"
          >
            <a-select placeholder="请选择" v-model="form.paymentMethod" @change="typeChange" popup-container=".fee-page">
              <a-option v-for="item in paywayEnum" :key="item.way" :value="item.way" :label="item.wayStr" />
            </a-select>
          </page-form-item>
          <page-form-item
            field="account"
            :label="costName + '账号'"
            labelTooltipContent="收/付款账号支持在系统管理菜单下的收支账号管理页面进行配置。"
          >
            <a-select
              :placeholder="!form.paymentMethod ? '请先选择' + costName + '方式' : '请选择'"
              v-model="form.account"
              :disabled="!form.paymentMethod ? true : false"
              popup-container=".fee-page"
            >
              <a-option
                v-for="item in accountList"
                :key="item.id"
                :value="item.id"
                :label="item.account + (item.bank ? '_' + item.bank : '')"
              />
            </a-select>
          </page-form-item>
          <page-form-item
            field="nowRetreatDepositAmount"
            :label="costName + '金额'"
            :rules="{ required: true, message: '请输入' + costName + '金额' }"
          >
            <i-input-number v-model="form.nowRetreatDepositAmount" unit="元" :precision="2" disabled />
          </page-form-item>
          <page-form-item field="clientName" label="客户名称" :rules="{ required: true, message: '请输入客户名称' }">
            <i-input placeholder="请输入" v-model="form.clientName" :max-length="20" />
          </page-form-item>
          <page-form-item field="clientCollectionCardNumber" :label="costName == '收款' ? '客户付款账号' : '客户收款账号'">
            <i-input placeholder="请输入" v-model="form.clientCollectionCardNumber" :max-length="20" />
          </page-form-item>
          <page-form-item field="remark" label="费用备注" size="2/3">
            <i-input placeholder="请输入" v-model="form.remark" :max-length="200" />
          </page-form-item>
        </page-form-row>
      </page-form>
    </div>
    <template #footer>
      <a-space>
        <a-button @click="onClose">关闭</a-button>
        <a-button type="primary" @click="submitFn" :loading="okLoading">确认</a-button>
      </a-space>
    </template>
  </a-modal>
</template>

<script setup name="DepositForm">
  import { getDetail, returnOrCollectDeposit, getAccountByPageData, getAccountByWayAndType } from '@/api/finance/deposit'
  import feeitem from './comfirm-fee-item.vue'
  import { Message } from '@arco-design/web-vue'
  import { ref } from 'vue'
  const paywayEnum = ref([]) //收付款方式
  const accountList = ref([]) //收付款账号列表
  const costType = ref(null) // 收支类型 10 收款 20 付款
  const costName = ref('')
  const feeList = ref([]) // 收付款列表
  const feeCostAmount = ref({}) //收付款类型及金额
  const formRef = ref(null)
  const okLoading = ref(false)
  const form = ref({
    id: '',
    returnOrCollectType: '',
  })
  // 打开弹窗
  const showModal = ref(false)
  const show = (id) => {
    // 重置
    resetForm()
    showModal.value = true
    form.value.id = id
    if (form.value.id) {
      getDetails(form.value.id)
    }
  }
  const onClose = () => {
    showModal.value = false
  }
  const resetForm = () => {
    paywayEnum.value = []
    accountList.value = []
    form.value = {}
  }
  // 收付款类型
  const getType = (costType) => {
    getAccountByPageData({ type: costType == 10 ? 0 : 1 }).then((res) => {
      var data = res.result
      data.forEach((i) => {
        if (i.way != '1' && i.way != '2' && i.way != '3' && i.way != '4' && i.way != '5' && i.way != '-1') {
          paywayEnum.value.push(i)
        }
      })
    })
  }
  // 账号
  const typeChange = (e) => {
    if (e) {
      form.value.account = ''
    }
    paywayEnum.value.forEach((el) => {
      if (el.way == e) {
        getAccountByWayAndType({ way: Number(el.way), type: costType.value == 10 ? 0 : 1 }).then((res) => {
          accountList.value = res.result
        })
      }
    })
  }
  // 详情
  const getDetails = (id) => {
    getDetail({ id: id }).then((res) => {
      getType(res.result.costType)
      feeList.value = res.result
      feeCostAmount.value = res.result
      feeList.value = res.result.orderDepositList
      form.value.nowRetreatDepositAmount = res.result.receiveAmount //固定金额，不可修改
      form.value.paymentTime = res.result.orderDepositList[0].createTime
      form.value.clientName = res.result.orderDepositList[0].shortOrder.memberName
      costType.value = res.result.costType
      if (costType.value == 10) {
        costName.value = '收款'
        form.value.returnOrCollectType = 1
      } else {
        costName.value = '付款'
        form.value.returnOrCollectType = 0
      }
    })
  }
  defineExpose({
    show,
  })
  const emit = defineEmits(['feepageConfirm'])
  const submitFn = () => {
    okLoading.value = true
    formRef.value.validate((error) => {
      if (!error) {
        const param = {
          ...form.value,
        }
        returnOrCollectDeposit(param)
          .then((res) => {
            showModal.value = false
            Message.success(res.message)
            emit('feepageConfirm')
          })
          .finally(() => {
            okLoading.value = false
          })
      } else {
        okLoading.value = false
      }
    })
  }
</script>

<style lang="less" scoped>
  .fee-list {
    padding-top: 20px;
    border: 1px solid #f2f3f5;
  }
  .all-cost {
    font-weight: 600;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    background: #f2f3f5;
    height: 100px;
    .cost-num {
      color: #1890ff;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
    }
  }
  // 弹窗添加的样式
  .fee-page {
    width: 100%;
    max-height: 70vh;
    position: relative;

    :deep(.arco-row) {
      margin-left: 0 !important;
      margin-right: 0 !important;
    }
    :deep(.arco-modal-body) {
      padding: 10px 80px !important;
    }
    :deep(.arco-col) {
      padding: 0 10px !important;
    }
  }
</style>
